<template>
	<view>
		<view class="tab">
			<u-tabs :list="list" :current="swiperIndex" :scrollable="false"  @click="swiperHeadChange"></u-tabs>
		</view>
		<swiper class="swiper" :current="swiperIndex" @change="swiperContentChange" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(item,index) in list">
				<slot :name="'swiper' + index"></slot>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '基础参数',
					},
					{
						name: '实时数据'
					}
				],
				swiperIndex: 0,
				swiperHeight: ''
			}
		},
		mounted() {
			this.setSwiperHeight(this.swiperIndex)
		},
		methods: {
			swiperHeadChange(v) {
				this.swiperIndex = v.index
			},
			swiperContentChange(v) {
				this.swiperIndex = v.target.current;
				this.setSwiperHeight(this.swiperIndex)
				this.$emit('swiperChange',v.target.current)
				
			},
			//动态设置swiper的高度
			setSwiperHeight(id) {
			  let query = uni.createSelectorQuery().in(this);
			  query.select('#swiper' + id).boundingClientRect();
			  query.exec((res) => {
				if (res && res[0]) {
				  this.swiperHeight = res[0].height;
				}
			  });
			},
		}
	}
</script>

<style>
	.tab {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		height: 100rpx;
	}
</style>
